<template>
  <div class="sku">
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :hide-stock="true"
      @buy-clicked="onBuyClicked"
    >
      <template slot="sku-messages" slot-scope="props">
        <van-field v-model="user.childName" required clearable label="姓名" placeholder="输入报名孩子的姓名"/>
        <van-cell
          title="性别"
          required
          is-link
          :value="user.childGender?user.childGender:'选择性别'"
          @click="sex = true"
        />
        <van-cell
          title="生日"
          required
          is-link
          :value="user.birthday?user.birthday:'选择生日'"
          @click="date = true"
        />
        <van-field v-model="user.mobile" required clearable label="电话" placeholder="输入联系电话"/>
        <van-field v-model="user.address" required clearable label="地址" placeholder="输入详细地址"/>
        <van-field v-model="user.comments" clearable label="备注" placeholder="输入备注"/>
      </template>
      <template slot="sku-actions" slot-scope="props">
        <div class="van-sku-actions">
          <van-button bottom-action @click="props.skuEventBus.$emit('sku:buy')">付款</van-button>
        </div>
      </template>
    </van-sku>
    <van-actionsheet
      v-model="sex"
      :actions="[
        {
          name: '男'
        },
        {
          name: '女'
        }
      ]"
      cancel-text="取消"
      @select="onSelectSex"
      @cancel="sex=false"
    />
    <van-actionsheet v-model="date">
      <van-datetime-picker v-model="birthday" @confirm="chooseDate" type="date"/>
    </van-actionsheet>
  </div>
</template>
<script>

export default {
  name: 'sku',
  props: {
    item: Object,
    type: String
  },
  data() {
    return {
      show: false,
      sex: false,
      date: false,
      birthday: '',
      goods: {},
      user: {
        childName: '张三',
        address: '沈阳市铁西区',
        mobile: '13344445555',
        birthday: '',
        childGender: '男',
        comments: ''
      },
      sku: {
        tree: [
          {
            k: '选择规格', // skuKeyName：规格类目名称
            v: [
              {
                id: '102',
                name: '数学',
                imgUrl: 'https://edu-image.nosdn.127.net/07e3b8f9-5721-47bb-a710-ab8cce9cab9e.jpg'
              }
            ],
            k_s: 's1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
          }
        ],
        list: [
          {
            id: 2259,
            price: 800,
            s1: '102',
            stock_num: 210
          }
        ],
        price: '1.00',
        stock_num: 10000,
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false // 是否无规格商品
      }
    }
  },
  created() {
    console.log(this.item)
    if (this.item.priceList) {
      this.setSku()
    }
  },
  methods: {
    buy(id) {
      this.show = true
      // console.log(id);
      this.groupBuyID = id
    },
    setSku() {
      this.goods = {
        title: this.item.name,
        picture: this.item.smallPicture
      }
      let sku = { ...this.sku }
      if (this.type === 'one') {
        sku.price = this.item.priceList[0].instantPrice
      } else if (this.type === 'group') {
        sku.price = this.item.priceList[0].groupPrice
      } else {
        sku.price = this.item.priceList[0].leaderPrice
      }
      sku.list = this.item.priceList.map(item => {
        if (this.type === 'one') {
          return {
            ...item,
            id: item.priceID,
            price: item.instantPrice * 100,
            s1: item.priceID,
            stock_num: 10000
          }
        } else if (this.type === 'group') {
          return {
            ...item,
            id: item.priceID,
            price: item.groupPrice * 100,
            s1: item.priceID,
            stock_num: 10000
          }
        } else {
          console.log(this.item)
          return {
            ...item,
            id: item.priceID,
            duration: this.item.duration,
            numberOfMember: this.item.numberOfMember,
            price: item.leaderPrice * 100,
            s1: item.priceID,
            stock_num: 10000
          }
        }
      })
      sku.tree[0].v = this.item.priceList.map(item => {
        return {
          id: item.priceID,
          name: item.specList.map(spec => {
            return spec.value
          }).join('-'),
          img: this.item.smallPicture
        }
      })
      this.sku = sku
    },
    onSelectSex(e) {
      this.user.childGender = e.name
      this.sex = false
    },
    chooseDate(e) {
      this.birthday = e
      this.user.birthday = e.toLocaleDateString()
      this.date = false
    },
    onBuyClicked(skuData) {
      if (!this.user.childName) {
        this.$toast('请输入姓名')
        return false
      }
      if (!this.user.mobile) {
        this.$toast('请输入电话号')
        return false
      }
      if (!this.user.address) {
        this.$toast('请填写地址')
        return false
      }
      if (!this.user.birthday) {
        this.$toast('请选择生日')
        return false
      }
      let num = skuData.selectedNum
      let good = skuData.selectedSkuComb
      // JSON包含元素：  productID,groupBuy,distributorID,groupBuyID,priceID,
      // leaderPrice,instancePrice,groupPrice,purchaseNumber,inTotal,
      // childName,childGender,mobile,address,comments
      console.log(this.item)
      let data = {
        productID: this.item.productID,
        priceID: good.id,
        distributorID: 0,
        leaderPrice: good.leaderPrice,
        instancePrice: good.price / 100,
        groupPrice: good.groupPrice,
        purchaseNumber: num,
        inTotal: num * good.price / 100,
        childName: this.user.childName,
        childGender: this.user.childGender === '男' ? 0 : 1,
        mobile: this.user.mobile,
        address: this.user.address,
        comments: this.user.comments,
      }
      // console.log(this.type);
      // console.log(data);
      // console.log(this.groupBuyID);
      if(this.type === 'one') {
        console.log(data);
      } else if (this.type === 'group') {
        //参团
        data.groupBuy = 0
        data.groupBuyID = this.groupBuyID
      } else {
        //开团
        data.groupBuy = 'yes';
        data.duration = good.duration
        data.numberOfMember = good.numberOfMember
      }
      this.$emit('buy', data)
      this.show = false
    }
  },
  watch: {
    item(val) {
      this.setSku()
    },
    type(val) {
      this.setSku()
    }
  }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
